
import React, { Component, createRef } from "react";
import type { ReactNode } from 'react'
import './app.css'
import { log } from "console";

interface iState {
    count: number
}
interface iProps { }


class Box extends Component {

    // --------------- 组件卸载阶段 ------------------

    // **** componentWillUnmount 组件卸载的时候执行
    componentWillUnmount(): void {
        console.log('组件卸载了');

    }
    render(): ReactNode {
        return <>子组件</>
    }
}


export default class App extends Component {

    state: iState = {
        count: 100
    }

    // https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
    // ------------- 组件创建挂载阶段 -----------------
    constructor(props: iProps) {
        super(props)
        console.log('constructor');
    }

    // 会在组件挂载和更新阶段执行
    static getDerivedStateFromProps(props: iProps, state: iState) {
        console.log('getDerivedStateFromProps');

        // 返回对象中的内容，就是要修改的内容
        return {
            // count: state.count + 1
        }
    }


    // render 挂载和更新阶段会被执行
    render() {
        console.log('render');

        return <>
            <div id="content">
                <h1 onClick={() => { this.setState({ count: this.state.count + 1 }) }}>{this.state.count}</h1>

                {this.state.count == 100 && <Box></Box>}
            </div>
        </>
    }

    // **** 组件挂载完成后执行的生命周期
    componentDidMount(): void {
        console.log('componentDidMount');
    }

    // ---------------- 更新阶段生命周期 ------------------
    shouldComponentUpdate(nextProps: iProps, nextState: iState) {

        console.log(nextState);

        // 更新阶段执行方法，return false 不更新页面也就是不调用 render,return true 就是正常更新
        if (nextState.count === 105) {
            // 当前页面不做渲染
            return false
        } else {
            // 可以渲染
            return true
        }
    }


    // 快照更新前，可以拿到原来值
    // getSnapshotBeforeUpdate 要和 componentDidUpdate 一起使用
    getSnapshotBeforeUpdate(prevProps: iProps, prevState: iState) {

        console.log('getSnapshotBeforeUpdate', prevProps, prevState);
        // return 出去的内容，会作为 componentDidUpdate 的第三个参数
        return '以后工作了不要随便跟人说晚安，他可能还要上夜班。'
    }

    // **** componentDidUpdate 数据更新阶段执行
    componentDidUpdate(prevProps: iProps, prevState: iState, snapshot: string) {
        console.log('componentDidUpdate', prevProps, prevState, snapshot);
    }


}